// 引入路由
// constantRoutes所有的静态路由
// asyncRoutes所有的动态路由
import { constantRoutes, asyncRoutes } from '@/router'

const state = {
  // 当用户登录后就是静态路由+用户所拥有权限的动态路由newRoutes  就是routes
  routes: constantRoutes
}
const mutations = {
  // 当用户登录后就是静态路由+用户所拥有权限的动态路由newRoutes  修改state的数据只能 用mutations
  setRoutes (state, newRoutes) {
    // 这样写不对  这样写不是用户登录后就是静态路由+用户所拥有权限的动态路由newRoutes  因为state.routes不是默认的静态路由  constantRoutes才是
    // state.routes = [...state.routes, ...newRoutes]
    // 每次用户登录应该是静态路由constantRoutes+newRoutes动态路由      // 应该是每次更新 都应该在静态路由的基础上进行追加
    state.routes = [...constantRoutes, ...newRoutes]
  }

}
const actions = {
  // usefInfo.roles.menus就是角色权限管理中的标识那一个选项 是一个数组
  // 如何将routes跟权限关联起来?? 就是vuex中用户的usefInfo.roles.menus跟动态路由里面的name匹配
  // asyncRoutes所有的静态路由
  // 遍历menus  看动态路由里的name跟menus相等的筛选出来
  // 需要注意   menus的标识命名必须得与动态路由里面的name命名一样
  filterRoutes (context, menus) {
    const routes = []
    // console.log(asyncRoutes)
    menus.forEach(key => {
      // key就是menus这个数组的每一项
      // 将筛选出来得到的数组push给routes数组不能直接push数组  需要...解构
      routes.push(...asyncRoutes.filter(item => item.name === key))
    })
    // 将得到有权限的数组routes通过mutations赋值给state.routes
    context.commit('setRoutes', routes)
    return routes // 这里为什么还要return  state数据 是用来 显示左侧菜单用的  return  是给路由addRoutes用的
  }
  // ok  filterRoutes方法设置好了  关键在哪里调用呢?  在导航守卫  获取用户资料之后调用通过用户资料里面的usefInfo.roles.menus  能够得到menus
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}
